<!--
 * @Author: xjt
 * @Date: 2021-06-28 16:59:46
 * @LastEditTime: 2021-06-29 20:18:44
 * @Description: 工作人员
 * @LastEditors: xjt
-->
<template>
  <div>
    <div class="primaryTitle">
      <strong>工作人员</strong>
    </div>
    <div class="wrap">
      <div class="wrapItem">
        <div class="numberPanel">
          <div class="numberPanelTop">
            <span class="num">{{totalData.jduser_count.value}}</span>
            <span class="unit">人</span>
          </div>
          <div class="numberPanelDown">{{totalData.jduser_count.label}}</div>
        </div>
        <div class="list">
          <div class="title">工作人员分类</div>
          <ul class="col-2">
            <li class="listPanel" v-for="data in totalData.category" :key="data.name">
              {{data.label}}
              <mark>{{data.value}}</mark>人
            </li>
          </ul>
        </div>
      </div>
      <div class="wrapItem" style="align-content: baseline;">
        <div class="numberPanel">
          <div class="numberPanelTop">
            <span class="num">{{totalData.now_work.value}}</span>
            <span class="unit">人</span>
          </div>
          <div class="numberPanelDown">{{totalData.now_work.label}}</div>
        </div>
        <div class="list">
          <div class="title">工作人员健康</div>
          <ul>
            <li class="listPanel" v-for="data in totalData.health" :key="data.name">
              {{data.label}}
              <mark>{{data.value}}</mark>人
            </li>
          </ul>
        </div>
      </div>
      <div class="tipsItem">
        <div class="tipsTitle">
          <span>风险提示</span>
        </div>
        <ul>
          <li v-for="(item, index) in totalData.warning" :key="index">
            <div class="datetime">{{item.monitor_time}}</div>
            <div class="info">{{item.person_name}} 体温{{item.temperature}}℃</div>
          </li>
        </ul>
        <el-button round type="primary" size="small">更多</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getStaffTotal } from '@/views/wy-home/api'
import dataConst from './const'
export default {
  mounted () {
    this.init()
  },
  data () {
    return {
      totalData: {
        jduser_count: {},
        now_work: {},
      }
    }
  },
  computed: {
    keyInfo () {
      return dataConst['staff']
    },
  },
  methods: {
    init () {
      getStaffTotal().then(res => {
        const data = res.data.data
        let totalData = {}
        for (const key in this.keyInfo) {
          switch (key) {
            case 'category':
            case 'health':
              totalData[key] = Object.entries(this.keyInfo[key]).map(item => {
                const [name, label] = item
                return { name, label, value: data[name] }
              })
              break;
            case 'warning':
              totalData[key] = data[this.keyInfo[key]];
              break;
            case 'total':
              Object.entries(this.keyInfo[key]).forEach(item => {
                const [name, label] = item
                totalData[name] = { label, value: data[name] }
              });
              break;
            default:
              break;
          }
        }
        this.totalData = totalData
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.wrap {
  color: #fff;
  display: grid;
  grid-template-columns: 6fr 4fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-areas:
    "a b"
    "c c";
  mark {
    background-color: unset;
    color: #00eaff;
    font-weight: bold;
    margin: 0 0.25em;
  }
  .wrapItem {
    display: grid;
    grid-template-columns: 1fr 2fr;
    justify-content: center;
    align-items: center;
    padding: 13px 0 30px;
    .list {
      .title {
        font-size: 20px;
        color: #ff8b24;
        line-height: 1;
      }
      li {
        padding-left: 0;
        font-size: 16px;
        margin-top: 15px;
      }
      ul.col-2 {
        clear: both;
        li {
          width: 50%;
          float: left;
        }
      }
    }
  }
  .totalPanel .listPanel {
    padding-left: 0;
  }
}
</style>
